<template>
  <div>
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
      <el-form-item>
        <el-select
            v-model="dataForm.deptId"
            class="input"
            placeholder="部门"
            size="medium"
            clearable="clearable"
        >
          <el-option v-for="one in deptList" :label="one.deptName" :value="one.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
            v-model="dataForm.typeId"
            class="input"
            placeholder="罚款类型"
            size="medium"
            clearable="clearable"
        >
          <el-option v-for="one in amectTypeList" :label="one.type" :value="one.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
            v-model="dataForm.date"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="medium"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="searchHandle()">生成报表</el-button>
      </el-form-item>
    </el-form>
    <div id="chart-container">
      <el-row :gutter="100">
        <el-col :span="8">
          <div class="chart" id="chart-1"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart" id="chart-2"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart" id="chart-3"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div id="chart-4"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import dayjs from 'dayjs';

export default {
  data: function () {
    return {
      dataForm: {
        deptId: null,
        typeId: null,
        date: null
      },
      deptList: [],
      amectTypeList: [],
      dataList: []
    };
  },
  methods: {
    loadDeptList: function () {
      let that = this;
      that.$http('dept/searchAllDept', 'GET', null, true, function (resp) {
        that.deptList = resp.list;
      });
    },
    loadAmectTypeList: function () {
      let that = this;
      that.$http('amect_type/searchAllAmectType', 'GET', {}, true, function (resp) {
        that.amectTypeList = resp.list;
      });
    },
    loadDataList: function () {
      let that = this;
      that.dataListLoading = true;

      let data = {
        deptId: that.dataForm.deptId,
        typeId: that.dataForm.typeId
      };

      if (that.dataForm.date != null && that.dataForm.date.length === 2) {
        let startDate = that.dataForm.date[0];
        let endDate = that.dataForm.date[1];
        data.startDate = dayjs(startDate).format('YYYY-MM-DD');
        data.endDate = dayjs(endDate).format('YYYY-MM-DD');
      }

      that.$http('amect/searchChart', 'POST', data, true, function (resp) {
        let chart_1 = resp.chart_1;
        let temp = [];
        for (let one of chart_1) {
          temp.push({name: one.type, value: one.ct});
        }
        // 绘制图表
        let option_1 = {
          title: {
            show: false,
            text: '暂无数据',
            left: 'center',
            top: 'center',
            textStyle: {
              color: 'pink',
              fontSize: 16,
              fontWeight: 400
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '罚款类型',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                formatter: '{name|{b}}',
                rich: {
                  time: {
                    fontSize: 12,
                    color: '#999'
                  }
                }
              },
              data: temp
            }
          ]
        };
        let myChart;
        if (temp.length === 0) {
          option_1.title.show = true;

          myChart = that.$echarts.init($('#chart-1')[0]);
          myChart.setOption(option_1);
        } else {
          myChart = that.$echarts.init($('#chart-1')[0]);
          myChart.setOption(option_1);
        }

        let chart_2 = resp.chart_2;
        temp = [];
        for (let one of chart_2) {
          if (one.ct > 0) {
            temp.push({name: one.title, value: one.ct});
          }
        }
        let option_2 = {
          title: {
            show: false,
            text: '暂无数据',
            left: 'center',
            top: 'center',
            textStyle: {
              color: 'pink',
              fontSize: 16,
              fontWeight: 400
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '罚款类型',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                formatter: '{name|{b}}',
                rich: {
                  time: {
                    fontSize: 12,
                    color: '#999'
                  }
                }
              },
              data: temp
            }
          ]
        };

        if (temp == null || temp.length === 0) {
          option_2.title.show = true;
          myChart = that.$echarts.init($('#chart-2')[0]);
          myChart.setOption(option_2);
        } else {
          myChart = that.$echarts.init($('#chart-2')[0]);
          myChart.setOption(option_2);
        }

        let chart_3 = resp.chart_3;
        temp = [];
        for (let one of chart_3) {
          if (one.ct > 0) {
            temp.push({name: one.title, value: one.ct});
          }
        }
        let option_3 = {
          title: {
            show: false,
            text: '暂无数据',
            left: 'center',
            top: 'center',
            textStyle: {
              color: 'pink',
              fontSize: 16,
              fontWeight: 400
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '罚款类型',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                formatter: '{name|{b}}',
                rich: {
                  time: {
                    fontSize: 12,
                    color: '#999'
                  }
                }
              },
              data: temp
            }
          ]
        };
        if (temp == null || temp.length === 0) {
          option_3.title.show = true;
          myChart = that.$echarts.init($('#chart-3')[0]);
          myChart.setOption(option_3);
        } else {
          myChart = that.$echarts.init($('#chart-3')[0]);
          myChart.setOption(option_3);
        }

        console.log(resp);
        let chart_4_1 = resp.chart_4_1;
        let data_1 = [];
        for (let one of chart_4_1) {
          data_1.push(one.ct);
        }
        let chart_4_2 = resp.chart_4_2;
        let data_2 = [];
        for (let one of chart_4_2) {
          data_2.push(one.ct);
        }

        let option_4 = {
          title: {
            text: '全年违纪统计图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['已交费', '未交费']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
              ]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '未交费',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              smooth: true,
              data: data_1
            },
            {
              name: '已交费',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              smooth: true,
              data: data_2
            }
          ]
        };
        myChart = that.$echarts.init($('#chart-4')[0]);
        myChart.setOption(option_4);
      });
    },
    searchHandle: function () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$refs['dataForm'].clearValidate();
          this.loadDataList();
        } else {
          return false;
        }
      });
    }
  },
  created: function () {
    this.loadDeptList();
    this.loadAmectTypeList();
    this.loadDataList();
  }
};
</script>

<style lang="less" scoped="scoped">
@import url('../../style/amect_report.less');
</style>
